<template>
  <div class="documentation">
    <ContentWrap>
      <div class="doc-header">
        <h1 class="doc-title">系统使用文档</h1>
        <p class="doc-subtitle">飞鸿AI管理系统操作指南</p>
      </div>
      
      <div class="doc-content">
        <!-- 快速开始 -->
        <section class="doc-section">
          <h2 class="section-title">📚 快速开始</h2>
          <p class="section-desc">欢迎使用飞鸿AI管理系统！本文档将帮助您快速了解系统的主要功能和操作流程。</p>
        </section>

        <!-- 主要功能流程 -->
        <section class="doc-section">
          <h2 class="section-title">🔄 主要功能流程</h2>
          
          <!-- 学生成绩管理 -->
          <div class="feature-block">
            <h3 class="feature-title">1. 学生成绩管理</h3>
            <div class="steps">
              <div class="step">
                <div class="step-number">1</div>
                <div class="step-content">
                  <h4>导入学生成绩</h4>
                  <p>进入「学生成绩管理」页面，点击「导入」按钮，选择Excel文件上传学生成绩数据。</p>
                  <ul>
                    <li>支持 .xlsx 和 .xls 格式文件</li>
                    <li>可选择是否更新已存在的学生成绩数据</li>
                    <li>导入前需要选择对应的考试</li>
                  </ul>
                </div>
              </div>
              
              <div class="step">
                <div class="step-number">2</div>
                <div class="step-content">
                  <h4>导出学生账号</h4>
                  <p>成绩导入成功后，可以导出学生账号信息，方便学生登录查看成绩。</p>
                  <ul>
                    <li>选择需要导出的班级</li>
                    <li>点击「导出学生账号」按钮</li>
                    <li>系统将生成包含学生登录信息的Excel文件</li>
                  </ul>
                </div>
              </div>
              
              <div class="step">
                <div class="step-number">3</div>
                <div class="step-content">
                  <h4>导出老师账号</h4>
                  <p>同样可以导出班主任账号信息，方便老师管理班级。</p>
                  <ul>
                    <li>支持按年级、班级名称等条件筛选</li>
                    <li>点击「导出老师账号」按钮</li>
                    <li>系统将生成包含班主任登录信息的Excel文件</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>

          <!-- 考试信息管理 -->
          <div class="feature-block">
            <h3 class="feature-title">2. 考试信息管理</h3>
            <div class="steps">
              <div class="step">
                <div class="step-number">1</div>
                <div class="step-content">
                  <h4>设置特控线</h4>
                  <p>在考试信息列表中，点击「特控线设置」按钮，为考试配置各科目的特控线分数。</p>
                  <ul>
                    <li>可设置一本线、二本线等不同层次的分数线</li>
                    <li>支持按科目组合设置不同的特控线</li>
                    <li>特控线用于学生成绩的等级划分</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- 辅助功能 -->
        <section class="doc-section">
          <h2 class="section-title">🛠️ 辅助功能说明</h2>
          
          <div class="auxiliary-features">
            <div class="aux-feature">
              <h4>班级信息管理</h4>
              <p>主要用于展示班级基本信息，包括班级名称、班主任、学生人数等。在导入学生成绩成功后，相关班级信息会自动更新显示。</p>
            </div>
            
            <div class="aux-feature">
              <h4>班级学生关联管理</h4>
              <p>展示学生与班级的关联关系，显示每个班级下的学生列表。此功能主要作为数据展示，在成绩导入后自动维护关联关系。</p>
            </div>
            
            <div class="aux-feature">
              <h4>特控线配置管理</h4>
              <p>统一管理系统中的特控线配置，可以查看所有考试的特控线设置情况。主要用于数据展示和统计分析。</p>
            </div>
          </div>
        </section>

        <!-- 操作注意事项 -->
        <section class="doc-section">
          <h2 class="section-title">⚠️ 操作注意事项</h2>
          
          <div class="notice-list">
            <div class="notice-item">
              <h4>数据导入</h4>
              <ul>
                <li>导入前请确保Excel文件格式正确，包含必要的字段信息</li>
                <li>建议先下载导入模板，按照模板格式准备数据</li>
                <li>大文件导入可能需要较长时间，请耐心等待</li>
              </ul>
            </div>
            
            <div class="notice-item">
              <h4>特控线设置</h4>
              <ul>
                <li>特控线设置后会影响学生成绩的等级划分</li>
                <li>建议在导入成绩前先设置好特控线</li>
                <li>可以根据实际情况随时调整特控线分数</li>
              </ul>
            </div>
            
            <div class="notice-item">
              <h4>账号导出</h4>
              <ul>
                <li>导出的账号信息包含登录密码，请妥善保管</li>
                <li>建议定期更新密码，确保账号安全</li>
                <li>可以按需导出特定班级或年级的账号信息</li>
              </ul>
            </div>
          </div>
        </section>

        <!-- 常见问题 -->
        <section class="doc-section">
          <h2 class="section-title">❓ 常见问题</h2>
          
          <div class="faq-list">
            <div class="faq-item">
              <h4>Q: 导入成绩时提示格式错误怎么办？</h4>
              <p>A: 请检查Excel文件是否按照系统模板格式准备，确保必填字段都有数据，数据类型正确。</p>
            </div>
            
            <div class="faq-item">
              <h4>Q: 如何修改已导入的成绩数据？</h4>
              <p>A: 可以重新导入Excel文件，选择"更新已存在的数据"选项，系统会覆盖原有数据。</p>
            </div>
            
            <div class="faq-item">
              <h4>Q: 特控线设置后如何查看效果？</h4>
              <p>A: 在学生成绩列表中可以看到根据特控线划分的等级信息，也可以在统计报表中查看分布情况。</p>
            </div>
          </div>
        </section>
      </div>
    </ContentWrap>
  </div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'Documentation' })
</script>

<style lang="scss" scoped>
.documentation {
  .doc-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 30px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    
    .doc-title {
      font-size: 32px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    
    .doc-subtitle {
      font-size: 16px;
      opacity: 0.9;
    }
  }
  
  .doc-content {
    max-width: 1000px;
    margin: 0 auto;
  }
  
  .doc-section {
    margin-bottom: 40px;
    
    .section-title {
      font-size: 24px;
      font-weight: bold;
      color: #333;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 2px solid #667eea;
    }
    
    .section-desc {
      font-size: 16px;
      color: #666;
      line-height: 1.6;
      margin-bottom: 20px;
    }
  }
  
  .feature-block {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 25px;
    
    .feature-title {
      font-size: 20px;
      font-weight: bold;
      color: #333;
      margin-bottom: 20px;
    }
  }
  
  .steps {
    .step {
      display: flex;
      margin-bottom: 25px;
      
      .step-number {
        width: 40px;
        height: 40px;
        background: #667eea;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        margin-right: 20px;
        flex-shrink: 0;
      }
      
      .step-content {
        flex: 1;
        
        h4 {
          font-size: 18px;
          font-weight: bold;
          color: #333;
          margin-bottom: 8px;
        }
        
        p {
          color: #666;
          line-height: 1.6;
          margin-bottom: 10px;
        }
        
        ul {
          color: #666;
          padding-left: 20px;
          
          li {
            margin-bottom: 5px;
            line-height: 1.5;
          }
        }
      }
    }
  }
  
  .auxiliary-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    
    .aux-feature {
      background: white;
      border: 1px solid #e9ecef;
      border-radius: 8px;
      padding: 20px;
      
      h4 {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin-bottom: 10px;
      }
      
      p {
        color: #666;
        line-height: 1.6;
      }
    }
  }
  
  .notice-list {
    .notice-item {
      background: #fff3cd;
      border: 1px solid #ffeaa7;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 15px;
      
      h4 {
        font-size: 16px;
        font-weight: bold;
        color: #856404;
        margin-bottom: 10px;
      }
      
      ul {
        color: #856404;
        padding-left: 20px;
        
        li {
          margin-bottom: 5px;
          line-height: 1.5;
        }
      }
    }
  }
  
  .faq-list {
    .faq-item {
      background: white;
      border: 1px solid #e9ecef;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 15px;
      
      h4 {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin-bottom: 10px;
      }
      
      p {
        color: #666;
        line-height: 1.6;
      }
    }
  }
}
</style>